<template>
  <el-card>
    <div class="page-tools">
      <!-- 左侧 -->
      <div class="left">
        <div class="tips">
          <slot name="left" />
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right">
        <slot name="right" />
      </div>
      <!-- 上面我们使用了俩个具名插槽，将来在使用组件的时候，
      只需要按照对应的插槽名称就可以在特定的位置插入内容 -->
    </div>
  </el-card>
</template>
<!-- 工具栏组件  （复用 封装）
    在后续的业务开发中 经常会用到一个类似下图的工具栏 作为公共组件 进行一下封装 方便复用
    很多模块中都有下图的结构 他们区别内部的文案不同，按钮数量不同 但结构统一 都是分左右两侧 左侧是
    icon标识 右侧是操作栏
    实现思路: 
    1.先做一个普通的静态ui结构 分好左右两侧
    2.找到不同的地方 开始思考如果变成可以通过传入的参数就是普通的js数据
    3.定位一下神魔方案去适配 props 插槽 如果给组件传入的参数是普通的js数据类型，比如，number布尔值设计为prop
    即可 如果传入的参数是一段较复杂的模板 【标签 组件】设计为插槽
    -->
<script>
export default {
  name: 'PageTools'
}
</script>

<style lang="scss" scoped>
  .page-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    ::v-deep.tips {
      line-height: 34px;
      padding: 0px 15px;
      border-radius: 5px;
      border: 1px solid rgba(145, 213, 255, 1);
      background: rgba(230, 247, 255, 1);
      i {
        margin-right: 10px;
        color: #409eff;
      }
  }
}

</style>